import styled from 'styled-components';
import { GlobalMargin, GlobalPadding, BorderRadius, CardBackground } from '@/config/style-global';
import { ReloadOutlined } from '@ant-design/icons';
import type { ReactNode } from 'react';

// 卡片容器
export const CardStyle = styled.div`
	width: 100%;
	min-height: 100%;
	padding: ${GlobalPadding}px;
	border-radius: ${BorderRadius}px;
	background-color: ${CardBackground};
`;

export const TextEllipsis = `overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;`;

// GlobalMargin -> Divider
interface DividerProps {
	type?: 'horizontal' | 'vertical';
	margin?: number;
}
export const JPDivider = styled.div<DividerProps>`
	${(props) => {
		const margin = props.margin;
		if (props.type === 'vertical') {
			return `
        width: ${margin ?? GlobalMargin}px;
        height: 100%;
      `;
		} else {
			return `
        width: 100%;
        height: ${margin ?? GlobalMargin}px;
      `;
		}
	}}
`;

// 文字超出**行后显示省略号，默认为2行
type ApostropheType = {
	rows?: number; // 显示几行
	textAlign?: 'left' | 'center' | 'right';
	fontSize?: number;
	children?: string | number;
	width?: number;
};
const Apostrophe = styled.span<ApostropheType>`
	display: block !important;
	max-width: ${(props) => (props.width ? props.width + 'px' : '100%')};
	text-align: ${(props) => (props.textAlign ? props.textAlign : 'left')};
	font-size: ${(props) => (props.fontSize ? props.fontSize : 14)}px;
	text-overflow: -o-ellipsis-lastline;
	overflow: hidden; // 溢出内容隐藏
	text-overflow: ellipsis; // 文本溢出部分用省略号表示
	display: -webkit-box; // 特别显示模式
	line-clamp: ${(props) => (props.rows ? props.rows : 2)};
	-webkit-line-clamp: ${(props) => (props.rows ? props.rows : 2)}; // 行数
	-webkit-box-orient: vertical; // 盒子中内容竖直排列
`;
export const ApostropheStyle = (props: ApostropheType) => {
	const { children } = props;
	if (children && !['string', 'number'].includes(typeof children)) {
		console.log('%c [ApostropheStyle: waring] 请传入有效的字符串', 'color: red', children);
	} else {
		return (
			<Apostrophe {...props} title={children + ''}>
				{children}
			</Apostrophe>
		);
	}
};

// toolbar
const ToolbarStyle = styled.div`
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: ${GlobalMargin}px;
	.title-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.title {
		font-size: 16px;
		margin-right: 12px;
	}
`;
type ToolbarProps = {
	title: ReactNode;
	handle?: ReactNode;
	refresh?: (...args: any) => void; // 刷新方法
};
export const ToolbarCom = (props: ToolbarProps) => {
	const { title, handle, refresh } = props;
	return (
		<ToolbarStyle>
			<div className="title-box">
				<span className="title">{title}</span>
				{refresh && <ReloadOutlined onClick={refresh} />}
			</div>
			{handle && <div className="handle">{handle}</div>}
		</ToolbarStyle>
	);
};
